<template>
    <div class="box">

        <div class="log">
            <!-- 图片信息 -->
            <div class="ims">
                <img src="../assets/13.jpg">
            </div>
            <!-- 输入框 -->
            <div class="ipt1">
                <el-input prefix-icon="el-icon-s-custom" placeholder="请输入内容" v-model="username" clearable></el-input>
            </div>
            <!-- 密码框 -->
            <div class="ipt2">
                <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="password" show-password></el-input>
            </div>
            <!-- 按钮 -->
            <div class="btn">
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info">重置</el-button>
            </div>
        </div>
    </div>
</template>
<script>
// import http from '../request/http'
import { login } from '../request/Api'

export default {
    data() {
        return {
            // 用户名
            username: 'admin',
            // 密码框
            password: '123456'

        }
    },
    created() {

    },
    methods: {
        // 登录
        login() {
            login({ username: this.username, password: this.password }).then(res => {
                console.log(res.data.data.token);
                if (res.data.meta.status == 200) {
                    //路由守卫
                    localStorage.setItem('token', res.data.data.token)
                    this.$message({
                        message: '恭喜你登录成功',
                        type: 'success'
                    });
                    this.$router.push('/Home')
                } else {
                    this.$message.error('账号或密码错误请重新输入');
                }
                if (this.username.length == 0 || this.password.length == 0) {
                    this.$message.error('请输入账号密码');
                }
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100vh;
    background-color: #2b4b6b;
    position: relative;

    .log {
        position: relative;

        .btn {
            width: 180px;
            margin-left: 62%;
        }

        .ipt1 {
            width: 90%;
            margin: 80px auto;
            display: flex;
            position: relative;
        }

        .ipt2 {
            width: 90%;
            margin-left: auto;
            position: absolute;
            left: 5%;
            top: 145px;
        }

        width: 500px;
        height: 300px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .ims {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        top: -20%;
        left: 40%;
        border: 3px solid #fff;
        box-shadow: 10px 5px 5px #000;

        img {
            border-radius: 50%;
            width: 100%;
            height: 100%;
        }
    }


}

* {
    padding: 0;
    margin: 0;
}
</style>